﻿@page "/admin/friendlink"
@model Moonglade.Web.Pages.Admin.FriendLinkModel
@{
    ViewBag.Title = "Manage Friend Links";
}

@section scripts{
<script>
    var editCanvas = new bootstrap.Offcanvas(document.getElementById('editLinkCanvas'));
    var fid = window.emptyGuid;

    function deleteFriendLink(friendlinkid) {
        callApi(`/api/friendlink/${friendlinkid}`,
            'DELETE',
            {},
            (resp) => {
                document.querySelector(`#tr-${friendlinkid}`).remove();
            });
    }

    function initCreateFriendLink() {
        fid = window.emptyGuid;
        document.querySelector('#edit-form').reset();
        editCanvas.show();
    }

    function editFriendLink(id) {
        callApi(`/api/friendlink/${id}`, 'GET', {},
            async (resp) => {
                var data = await resp.json();
                fid = id;
                document.querySelector('#EditLinkRequest_Title').value = data.title;
                document.querySelector('#EditLinkRequest_LinkUrl').value = data.linkUrl;
                editCanvas.show();
        });
    }

    function deleteFriendLinkConfirm(id) {
        var cfm = confirm("Delete Confirmation?");
        if (cfm) deleteFriendLink(id);
    }

    function handleSubmit(event) {
        event.preventDefault();

        var httpVerb = fid == window.emptyGuid ? 'POST' : 'PUT';
        var apiAddress = fid == window.emptyGuid ? `/api/friendlink` : `/api/friendlink/${fid}`;

        const data = new FormData(event.target);
        const value = Object.fromEntries(data.entries());

        callApi(apiAddress,
            httpVerb,
            {
                id: fid,
                title: value["EditLinkRequest.Title"],
                linkUrl: value["EditLinkRequest.LinkUrl"]
            },
            (resp) => {
                document.querySelector('#edit-form').reset();
                $("#editFriendlinkModal").modal('hide');
                window.location.reload();
            });
    }

    const form = document.querySelector('#edit-form');
    form.addEventListener('submit', handleSubmit);
</script>
}

<div class="admin-toolbar ps-4 pe-4 pt-2 pb-2 border-bottom mb-3 shadow-sm">
    <a class="btn btn-outline-accent" href="javascript:initCreateFriendLink();">
        <i class="bi-plus-lg"></i>
        @SharedLocalizer["New"]
    </a>
    
    <a asp-action="ExportDownload" asp-controller="DataPorting" asp-route-type="FriendLinks" class="btn btn-outline-accent" target="_blank">
        <i class="bi-upload"></i>
        @SharedLocalizer["Export"]
    </a>
</div>

<div class="ps-4 pe-4">
    @foreach (var item in Model.Links.OrderBy(m => m.Title))
    {
        <div id="tr-@item.Id" class="row">
            <div class="col">
                <h6>
                    @item.Title
                </h6>
                <div>
                    <a href="@item.LinkUrl" target="_blank">@item.LinkUrl</a>
                </div>
            </div>
            <div class="col-auto">
                <a href="javascript:editFriendLink('@item.Id');" class="btn btn-sm btn-outline-accent btn-edit"><i class="bi-pen"></i></a>
                <a href="javascript:deleteFriendLinkConfirm('@item.Id');" class="btn btn-sm btn-outline-danger btn-delete"><i class="bi-trash"></i></a>
            </div>
        </div>
        <hr />
    }

    @Html.AntiForgeryToken()

    <p class="text-muted mt-4">@SharedLocalizer["* Note: Friend link cache refreshes every 60 minutes, you may need to wait for some time to see the new data."]</p>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="editLinkCanvas" aria-labelledby="editLinkCanvasLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="editLinkCanvasLabel">@SharedLocalizer["Friend Link Information"]</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <form id="edit-form" method="post">
            <div class="mb-3">
                <label class="form-label" asp-for="EditLinkRequest.Title"></label>
                <input asp-for="EditLinkRequest.Title" class="form-control" required />
            </div>
            <div class="mb-3">
                <label class="form-label" asp-for="EditLinkRequest.LinkUrl"></label>
                <input asp-for="EditLinkRequest.LinkUrl" class="form-control" required />
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-accent">@SharedLocalizer["Submit"]</button>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">@SharedLocalizer["Cancel"]</button>
            </div>
        </form>
    </div>
</div>
